<template>
	<view class="order-container">
		<!-- 分类 -->
		<view class="category">
			<view class="item" :class="{sel: item.selected}" v-for="(item, index) in categoryData" :key="index"
				@click="select(index)">{{item.text}}</view>
		</view>

		<view class="good-list">
			<view class="item" v-for="item in allOrder" :key="item.id" @click="goOrderDetail(item.order_id, item.goods_ids)">
				<view class="up" v-for="good in item.goods">
					<image :src="good.thumb_path" />
					<view class="text">
						<view class="title">{{good.title}}</view>
						<view class="price">￥{{good.sell_price}}</view>
					</view>
				</view>
				<view class="down">
					<view class="time">{{unixToformatDate(item.add_time)}}</view>
					<view class="middle">
						<view class="count">共{{item.number}}件商品</view>
						<view class="price">应付价格：￥{{item.total_price}}</view>
					</view>
					<view class="pay" v-if="item.status == 0 && item.is_cancel == 0">立即付款</view>
					<view class="payed" v-if="item.status == 1">已付款</view>
					<view class="canceled" v-if="item.is_cancel == 1 && item.status == 0" >已取消</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		getUserOrder
	} from '../../api/user.api';
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import {
		unixToformatDate
	} from '../../utils/util';
	import { useLoginStore } from '../../stores/store';
	
	const loginStore = useLoginStore()

	const userOrder = ref([]) // 订单数据
	const allOrder = ref([])

	onLoad(() => {
		getUserOrderData()
	})
	
	onShow(() => {
		if (!loginStore.Token) {
			loginStore.goLogin('order')
			uni.showToast({
				title: '请先登录',
				icon: 'error'
			})
		}
	})

	const categoryData = ref([{
			id: 1,
			text: '全部',
			selected: true
		},
		{
			id: 2,
			text: '未付款',
			selected: false
		},
		{
			id: 3,
			text: '待发货',
			selected: false
		},
		{
			id: 4,
			text: '已完成',
			selected: false
		}
	])

	const select = (index) => {
		categoryData.value.forEach(item => {
			item.selected = false
		})
		categoryData.value[index].selected = true

		if (index === 0) {
			allOrder.value = userOrder.value
		}

		if (index === 1) {
			allOrder.value = userOrder.value.filter(item => item.status === 0 && item.is_cancel === 0)
		}

		if (index === 2) {
			allOrder.value = userOrder.value.filter(item => item.is_out === 0 && item.status === 1)
		}

		if (index === 3) {
			allOrder.value = userOrder.value.filter(item => item.is_finish === 1)
		}
	}

	// 获取订单数据
	const getUserOrderData = async () => {
		let result = await getUserOrder()
		allOrder.value = result
		userOrder.value = result
	}
	
	// 跳转订单详情
	const goOrderDetail = (order_id, goods_ids) => {
		uni.navigateTo({
			url: `/pages/orderDetail/orderDetail?order_id=${order_id}&goods_ids=${goods_ids}`
		})
	}
</script>

<style lang="scss" scoped>
	.order-container {
		.sel {
			border-bottom: 1px solid #ee0a24;
		}

		// 分类
		.category {
			width: px2rpx(375);
			height: px2rpx(44);
			display: flex;
			align-items: center;
			justify-content: space-around;

			.item {
				padding: px2rpx(5);
				font-size: px2rpx(14);
			}
		}

		// 订单列表
		.good-list {
			width: px2rpx(375);

			.item {
				width: px2rpx(375);

				.up {
					margin: px2rpx(10);
					width: px2rpx(355);
					display: flex;
					align-items: center;

					image {
						width: px2rpx(88);
						height: px2rpx(88);
						margin-right: px2rpx(10);
					}

					.text {
						width: px2rpx(247);
						height: px2rpx(88);
						font-size: px2rpx(14);
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						align-items: flex-start;
					}
				}

				.down {
					width: px2rpx(375);
					border-top: 1px solid #ebedf0;
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: px2rpx(12);

					.time {
						margin-left: px2rpx(5);
					}

					.middle {
						display: flex;

						.count {
							margin-right: px2rpx(5);
						}
					}

					.pay {
						padding: px2rpx(5);
						border: 1px solid #ee0a24;
						display: flex;
						justify-content: center;
						align-items: center;
						border-radius: px2rpx(5);
						margin-right: px2rpx(5);
					}

					.payed {
						padding: px2rpx(5);
						border: 1px solid #ee0a24;
						display: flex;
						justify-content: center;
						align-items: center;
						border-radius: px2rpx(5);
						margin-right: px2rpx(5);
					}
					
					.canceled{
						padding: px2rpx(5);
						border: 1px solid #ee0a24;
						display: flex;
						justify-content: center;
						align-items: center;
						border-radius: px2rpx(5);
						margin-right: px2rpx(5);
					}
				}
			}
		}
	}
</style>